<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css列表属性</title>
    <style type="text/css">
        /**{
            margin: 0px;
            padding: 0px;
        }*/
        .my-ul{
            background:pink;
            list-style: none url("you.png") inside;
            /*list-style-type: none;
            list-style-image: url("you.png");
            list-style-position: inside;*/
            /*margin-left:10px;
            padding-left:0px;*/
            /**/
            /*padding-left:-10px;*/
        }
        .myli{
            margin-left: -16px;
            background-color: lightcyan;
            width:500px;
            /* 小图标在里面还是在外面 */
            list-style-position: outside;
            line-height: 30px;
        }
    </style>
</head>
<body>
<!--
1、在默认情况下  li 和 ul 有默认的边距，我们
    可以通过在li元素增加margin-left来解决这个问题
2、如果我们希望把图标放在li元素内，则可以在li元素中增加一个样式
    list-style-position:inside;
3、我们可以把三个属性放到一起写

-->
    <ul class="my-ul">
        <li class="myli">新年开门红</li>
        <li class="myli">新年开门红</li>
        <li class="myli">新年开门红</li>
        <li class="myli">新年开门红</li>
        <li class="myli">新年开门红</li>
        <li class="myli">新年开门红</li>
    </ul>
</body>
</html>